import React, { useEffect, useState } from 'react'
import { Table, Button } from 'antd'
import { useLocation } from 'react-router-dom'
import { formatTime } from '~/utils/utils'
import { queryDetail } from '~/api/upload-item-api'
import { ColumnProps } from 'antd/lib/table'


const colums = ({ onCheckImage } : any): ColumnProps<any>[] =>[
  {
    title: '序号',
    dataIndex: 'id',
    align: 'center',
    render: (_: any, record: any, index: number) => <div>{index + 1}</div>
  },
  {
    title: '照片',
    dataIndex: 'name',
    align: 'center'
  },
  {
    title: '上传人',
    dataIndex: 'createUserName',
    align: 'center'
  },
  {
    title: '上传时间',
    align: 'center',
    dataIndex: 'createTime',
    render: (createTime: any) => <div>{formatTime(createTime)}</div>
  },

  {
    title: '操作',
    dataIndex: 'age4',
    align: 'center',
    key: 'age',
    render: (_: any, record: any) => (
      <Button type="primary" size="small" onClick={() => onCheckImage(record)} >
        查看图片
      </Button>
    )
  }
]

const onCheckImage  = (record: any) => {
  // const url = "http://15.75.21.20:9081/fz-wssp/"+record.name
  const url = "http://15.75.10.166:9081/fz-wssp/"+record.name
  window.open(url)
}

const ImgLists = () => {
  const { state }: any = useLocation()
  const [imgList, setImgLists] = useState([])
  const { serialNo } = state

  const handleGetDetail = async () => {
    const { data } = await queryDetail({ serialNo })
    setImgLists(data)
  }

  useEffect(() => {
    handleGetDetail()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <div>
      <Table
        pagination={{
          size: 'default',
          total: imgList.length,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: total => `共 ${total} 条`
        }}
        rowKey="id"
        dataSource={imgList}
        columns={colums({onCheckImage})}
        bordered
      />
    </div>
  )
}

export default ImgLists
